<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        body{
            background-color: #ccc;
        }
        #app{
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border:4px solid blueviolet;
            border-radius: 1em;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
            padding:1em 2em 2em;
        }
        h3{
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <h3>v-for 循环</h3>

        <!-- 循环次数由可遍历数据项来决定 -->
        <button v-for="( item , index) in aihao" :key="index">
            item: {{item}} index:{{index}}
        </button>


        <!-- 循环次数由可遍历数据项来决定 -->
        <p v-for="item in aihao">
            item: {{item}}
        </p>
     
    </div>
    <script>
        
// 功能 ：快速批量生成列表结构（循环）

// 格式

// 格式1：完整格式
// <元素 v-for="(遍历变量，索引变量) in 可遍历的数据项" :key="唯一的id"></元素>
//      遍历变量：当前循环取出来的值
//      索引变量: 当前循环下标
//      :key 是可选的。它的作用是用来唯一标识当前元素项，在vue内部，会根据
//                    这个唯一的标记来做一些优化。


// 格式2：简写格式
// <元素 v-for="遍历变量 in 可遍历的数据项"></元素>
//    在完整格式的基础上，可以省略 :key 和 索引变量。

        const vm = new Vue({
            el: "#app",
            data: {
                aihao: ['唱歌', '多人运动', '时间管理']
            }
            
        })
       
    </script>

</body>
</html>